<!-- 这个页面是home/index的副本，用于给一览官网yl1001.com跳转 -->
<template>
  <div class="all">
    <div id="videoBack" class="henanCehui">
      <video ref="video" autoplay loop muted>
        <source src="https://img3.job1001.com/position/indexBg2.mp4" type="video/mp4" />
      </video>
    </div>
    <div id="app-container">
      <!-- 标题和搜索框之类的，包含河南测绘学院特殊处理(后端的主意) -->
      <!-- 如果你改动了以下template的内容，会牵扯很多东西，一定要看onscroll事件的逻辑是否被正常触发 -->
      <template>
        <div id="top" class="henanCehui" @click.stop="showGlass ? null : handleTopClick()">
        </div>
        <div id="title" @click="showGlass ? null : handleTopClick()">
          <div class="titleCustomerName">
            {{ customerDesc }}
          </div>
        </div>
        <div class="topTitle" @click="showGlass ? null : handleTopClick()">
          <div class="pic"></div>
        </div>
        <div class="topDesc" @click="showGlass ? null : handleTopClick()">
          <img class="pic" :src="customerImg" alt="" />
          <span>{{ customerDesc }}</span>
        </div>
      </template>
      <!-- 
        主要页面功能,一下页面的元素多少都要设置z-index,否则会被#videoBack覆盖
        z-index真的很重要！不要乱设置！因为要实现效果会各种覆盖！
      -->
      <!-- tab栏 -->
      <div class="main-tabs">

        <div v-if="showCivil == '1'" :class="{
            'main-tabs-item': true,
            'main-tabs-item-active': showType == 'civil',
          }" @click="showGlass ? null : changeShowType('civil')" :style="{ width: '141px', height: '64px' }">
          <svg class="gradient-border" viewBox="0 0 144 66" v-if="showType == 'civil'">
            <defs>
              <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color: #94aad8; stop-opacity: 1" />
                <stop offset="100%" style="stop-color: #253f7a; stop-opacity: 1" />
              </linearGradient>
            </defs>
            <rect x="1" y="1" width="142" height="64" rx="10" ry="10" fill="none" stroke="url(#grad1)"
              stroke-width="1.7" />
            <image x="17" y="12" width="30" height="30" :href="mainTablsItemIcon" />
            <text x="52" y="50%" fill="#e9f0f1" font-size="17px" font-weight="bold"
              font-family="PingFang-SC, PingFang-SC">
              考公考编
            </text>
          </svg>
          <span class="main-tabs-item-text" v-else> 考公考编 </span>
        </div>
      </div>
      <!-- 切换显示的主体页面 -->
      <template v-if="showType == 'position'">
        <depFilterList ref="depFilterListRef" @selectedChecks="selectedChecks"></depFilterList>
        <div class="main">
          <searchList ref="searchListRef" :SecretKey="SecretKey" :positionList="positionList"
            :selectedClass="selectedClass"></searchList>
          <hotJob :hotPositionList="hotPositionList" ref="hotJobRef"></hotJob>
        </div>
      </template>
      <!-- 下面的结构和上面的不一样哦 -->
      <template v-else-if="showType == 'campus'">
        <jobFilter ref="jobFilterRef" @selectedJobChecks="selectedJobChecks"></jobFilter>
        <div class="main">
          <jobSearchList ref="searchListRef" :SecretKey="SecretKey" :positionList="positionList"
            :selectedJobClass="selectedJobClass"></jobSearchList>
          <jobSearchSide :hotPositionList="hotPositionList" ref="hotJobRef"></jobSearchSide>
        </div>
      </template>
      <!-- 考公岗位 -->
      <template v-else-if="showType == 'civil'">
        <civilJobFilter v-if="freeToken" ref="jobFilterRef" @getYears="handleGetYears"
          @selectedCivilJobChecks="selectedCivilJobChecks">
        </civilJobFilter>
        <div class="main civilMain" v-if="freeToken">
          <civilJobSearchList ref="searchListRef" :yearList="yearList" :SecretKey="SecretKey"
            :selectedCivilJobClass="selectedCivilJobClass" v-if="selectedCivilJobClass['civilType'][0] == 1">
          </civilJobSearchList>
          <civilTeacherSearchList ref="searchListRef" :yearList="yearList" :SecretKey="SecretKey"
            :selectedCivilJobClass="selectedCivilJobClass" v-else-if="selectedCivilJobClass['civilType'][0] != 1">
          </civilTeacherSearchList>
          <jobSearchSide :hotPositionList="hotPositionList" ref="hotJobRef" :showMoreButton="true" v-if="false">
          </jobSearchSide>
        </div>
      </template>

    </div>
    <freeDialog />
  </div>
</template>

<script>
import { getFreeToken } from "@/api/user.js";
import freeDialog from "@/components/freeDialog";
import searchBox from "./components/searchBox";
import filterList from "./components/filterList";
import depFilterList from "./components/depFilterList";
import jobFilter from "./components/jobFilter";
import searchList from "./components/searchList";
import jobSearchList from "./components/jobSearchList";
import civilJobFilter from "./components/civilJobFilter";
import civilJobSearchList from "./components/civilJobSearchList";
import civilTeacherSearchList from "./components/civilTeacherSearchList";
import hotJob from "./components/hotJob/index";
import jobSearchSide from "./components/jobSearchSide/index";
import mainTablsItemIcon from "@/assets/home/mainTablsItemIcon.png";
import mineAvatar from "./components/mineAvatar";

export default {
  components: {
    searchBox,
    filterList,
    depFilterList,
    searchList,
    hotJob,
    jobFilter,
    jobSearchList,
    jobSearchSide,
    civilJobFilter,
    civilJobSearchList,
    mineAvatar,
    civilTeacherSearchList,
    freeDialog,
  },
  name: "freehome",
  data() {
    return {
      loading: false,
      freeToken: "",
      showType: "civil",
      showCivil: "1",
      dateType: "10",
      leftDays: 0,
      timeHour: "0",
      timeMin: "0",
      timeSec: "0",
      leftTime: 0,
      ztLogo: require("../../assets/home/zt-logo.png"),
      wxImg: require("../../assets/home/ty-wx.png"),
      showGlass: false,
      SecretKey: "",
      customerDesc: "一览考公考编大全",
      customerName: "一览考公考编大全",
      titleCustomerImg: "",
      sassCustomerName: "", //通过sass那边传入的
      customerImg: "",
      showButtons: false,
      isEdit: false,
      collectList: [],
      collectDialog: false,
      updateMessage: "",
      inputData: "",
      clickInputOutside: false,
      positionList: [],
      yearList: "",
      orderList: [],
      hotPositionList: [],
      selectedClass: [],
      selectedJobClass: {
        zpTrade: [],
        salary: [],
        gznum: ["-1||0"],
        eduId: [],
        regionid: ["100000-全国"],
      },
      selectedCivilJobClass: {
        politicalStatus: [],
        edu: [],
        year: [],
        regionId: ["100000-全国"],
        civilType: [1],
        recruitmentStatus: [],
        date: [],
      },
      questionOpen: false,
      appletOpen: false,
      updateOpen: false,
      careerTagIds: [],
      mainTablsItemIcon,
      titleCustomerNameWidth: 0, //固定顶部的标题名字的宽度
      titleCustomerIcon: "",
      searchBoxHeight: "0",
      showMine: false,
      isShowPosition: true,
      dialogTableVisible: false,
    };
  },
  destroy() {
    // 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错
    window.removeEventListener("scroll", this.onScroll);
  },
  async created() {
    this.reqGetFreeToken();
    this.customerImg = this.ztLogo;
    document.title = "考公考编";
    localStorage.setItem("customerDesc","一览考公考编大全")
  },
  mounted() {
    window.addEventListener("click", this.listenerChangeFlag);
    window.addEventListener("scroll", this.onScroll);
    this.$refs.video.playbackRate = 0.4;
  },
  beforeDestroy() {
    window.removeEventListener("click", this.listenerChangeFlag);
  },
  methods: {
    reqGetFreeToken() {
      this.loading = this.$loading({
        lock: true,
        text: "加载中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      const params = {};
      //这个页面是从yl1001.com调过来的，所有需要先请求token，再展示组件
      //这个接口无论什么环境，返回的都是正式环境的token
      getFreeToken(params)
        .then((res) => {
          if (res.code == 200) {
            if(res.data){
              this.freeToken = res.data;
            localStorage.setItem("token", "Bearer " + this.freeToken);
            sessionStorage.setItem("from","ylIndex")
          this.loading.close();
            }else{
              setTimeout(() => {
                this.reqGetFreeToken()
              }, 500);
            }
          }
        })
        .catch((e) => {
          console.log(e);
        })
        .finally(() => {
        });
    },
    changeShowType(value) {
      this.$store.dispatch("settings/changeSetting", {
        key: "showType",
        value: value,
      });
      this.searchBoxHeight = value == "position" ? "82px" : "0";
    },
    handleTopClick() {
      //关闭所有弹窗toolltips
      // this.$refs.depFilterListRef.closeTooltips();
      // const playbackRate = this.$refs.video.playbackRate;
      // if (playbackRate == 0) {
      //   this.$refs.video.playbackRate = 0.45;
      // } else {
      //   this.$refs.video.playbackRate = 0;
      // }
    },
    onScroll() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      let headTitle = document.getElementById("title");
      let historyWords = document.getElementsByClassName("historyWords")[0];

      if (
        document.documentElement.scrollHeight - window.innerHeight <=
        scrollTop + 20
      ) {
        this.$store.dispatch("settings/changeSetting", {
          key: "canScroll",
          value: true,
        });
      } else {
        this.$store.dispatch("settings/changeSetting", {
          key: "canScroll",
          value: false,
        });
      }

      if (scrollTop > 120) {
        headTitle.style.opacity = "1";
        headTitle.style.backgroundColor = "rbga(255,255,255, 0.26)";
        headTitle.style.backdropFilter = "blur(6px)";
      } else {
        headTitle.style.backdropFilter = "none";
        headTitle.style.backgroundColor = "";
        headTitle.style.boxShadow = "none";
        headTitle.style.opacity = "0";
      }
      if (scrollTop > 150) {
        if (historyWords) {
          // historyWords.style.opacity = "0";
          historyWords.style.display = "none";
        }
      } else {
        if (historyWords) {
          historyWords.style.opacity = "1";
          historyWords.style.display = "flex";
        }
      }
    },
    listenerChangeFlag(e) {
      // let nowClassName = e.target.className;
      // if (nowClassName != "search" && nowClassName != "el-input__inner") {
      //   this.$refs.searchBox.clickInputOutside();
      // }
    },
    selectedChecks(value) {
      //将filter里获取到的选项送到菜单处
      this.selectedClass = value;
      // console.log("this.selectedClass", this.selectedClass);

      //通知列表默认为第一项，同时返回第一项三级数据
      // this.$refs.searchListRef.reqGetDefaultPositionTree();
    },
    selectedJobChecks(value) {
      this.selectedJobClass = value;
    },
    selectedCivilJobChecks(value) {
      this.selectedCivilJobClass = value;
    },
    handleGetYears(value) {
      const temp = [];
      value.forEach((item) => {
        temp.push(item.value);
      });
      this.yearList = temp.join("_");
    },
    //获取职位列表
    getSearchList() {
      let params = {};
    },
    getInputData(inputData) {
      this.inputData = inputData;
      //console.log("搜索");
      this.getSearchList();
    },
  },
};
</script>

<style lang="scss"></style>

<style scoped lang="scss">
.all {
  background: #2F416F;
  position: relative;
  min-width: 1000px;
  min-height:100vh;
  .glass {
    width: 100%;
    height: 100%;
    background: rgba(22, 22, 22, 0.6);
    backdrop-filter: blur(3px);
    position: absolute;
    top: 0;
    z-index: 9999;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-top: 20%;
    .wx-card {
      width: 361px;
      height: 316px;
      background-image: url("../../assets/home/wx-bg.png");
      background-size: 100% 100%;
      padding: 23px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .title {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        img {
          width: 28px;
          height: 28px;
        }
        span {
          font-weight: 800;
          font-size: 16px;
          color: #141416;
        }
      }
      .desc {
        margin-bottom: 19px;
      }
      .wx {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        background-color: #ffffff;
        padding: 3px 3px 4px 4px;
        border-radius: 4px;
        img {
          width: 148px;
          height: 148px;
        }
      }
      .name {
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 15px;
        color: #333333;
      }
    }
  }
}

#videoBack {
  width: 100%;
  position: absolute;
  top: 0;
  height: 170px;
  overflow: hidden;
  // transform: scale(1.2);
  z-index: 0;
  // &.henanCehui {
  //   height: 265px;
  // }
  video {
    width: auto;
    min-height: 170px;
    z-index: 0;
  }
}
#top {
  height: 47px;
  width: 100%;
  // background: url("../../assets/home/top.png") no-repeat;
  background-size: 100% 57px;
}
#top {
  height: 57px;
  width: 100%;
  z-index: 2000;
  display: flex;
  justify-content: center;
  margin-top: 42px;
  &.henanCehui {
    position: relative;
    justify-content: flex-end;
  }
  img {
    height: 54px;
    width: auto;
  }
  #campusEntrance {
    position: absolute;
    right: 30px;
    font-size: 15px;
    color: white;
    cursor: pointer;
  }
}
#app-container {
  width: 100%;
  min-width: 1000px;
  // max-height: calc(100vh + 177px);
  display: flex;
  // background: url("../../assets/home/back.png") no-repeat;
  background-color: #333e68;
  flex-direction: column;
  background-size: 100% auto;
  align-items: center;
  padding-bottom: 10px;
  // overflow-y: hidden;
  .experience-time {
    // width: 253px;
    height: 28px;
    z-index: 7;
    position: fixed;
    top: 18px;
    right: 110px;
    // background-color: red;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #ffffff;
    .time {
      margin-left: 9px;
      display: flex;
      flex-direction: row;
      align-items: center;
      .time-box {
        width: 56px;
        height: 28px;
        padding: 4px 8px; /* 内边距 */
        border: 1px solid #5e6d84; /* 边框 */
        border-radius: 4px; /* 圆角 */
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* 阴影 */
        margin: 0 4px;
        font-family: D-DIN-PRO-500-Medium;
        font-weight: bold;
        font-size: 15px;
        color: #ffffff;
      }
      .dot {
        height: 18px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        div {
          width: 4px;
          height: 4px;
          background: #ffffff;
          border-radius: 50%;
        }
      }
    }
  }
  .right-110 {
    right: 110px;
  }

  .right-24 {
    right: 24px;
  }
  #title {
    left: 0;
    top: 0;
    opacity: 0;
    position: fixed;
    width: 100%;
    height: 57px;
    background-color: none;
    backdrop-filter: none;
    display: flex;
    align-items: center;
    padding-left: 25px;
    z-index: 6; //很重要 不要随便改
    font-family: "title-home-font";
    color: #fff;
    font-size: 17px;
    line-height: 24px;
    letter-spacing: 2px;
    .titleCustomerName {
      // max-width: 22vw;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-inline-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      height: 28px;
    }
    img {
      margin-right: 8px;
      height: 28px;
      width: auto;
    }
  }
  .topTitle {
    font-family: "title-home-font";
    color: #fff;
    font-size: 32px;
    line-height: 32px;
    letter-spacing: 2px;
    width: 100%;
    display: flex;
    margin-top: 0px;
    align-items: center;
    z-index: 10;
    margin-top: -84px;
    margin-bottom: 4px;
    padding-left: 18px;
    .pic {
      height: 38px;
      margin-right: 7px;
      margin-top: 6px;
    }
  }
  .topDesc {
    font-family: "title-home-font";
    color: #fff;
    font-size: 32px;
    line-height: 28px;
    letter-spacing: 2px;
    width: 100%;
    display: flex;
    margin-top: 0px;
    justify-content: center;
    align-items: center;
    z-index: 10;
    margin-top: 8px;
    // margin-bottom: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .pic {
      width: 38px;
      height: 38px;
      margin-right: 10px;
      margin-top: 8px;
    }
  }
  // .henanSerchBoxContainer {
  //   position: sticky;
  //   top: 0;
  //   // height: 110px;
  //   z-index: 2;
  //   margin-top: 26px;
  //   ::v-deep .search-box {
  //     margin-top: 10px;
  //   }
  // }
  .ylTitle {
    font-size: 24px;
    font-family: SourceHanSansCN-Bold, SourceHanSansCN;
    font-weight: bold;
    color: #7f9dc9;
    line-height: 36px;
  }
  .main-tabs {
    width: 100%;
    position: relative;
    display: flex;
    z-index: 4;
    padding: 0 14px;
    &::before {
      display: flow-root;
      position: absolute;
      top: -27px;
      left: 0;
      content: "";
      width: 100%;
      height: 124px;
      z-index: -1;
      background-image: url("../../assets/home/filterBeforeBG.png");
    }
    .main-tabs-item {
      position: relative;
      display: flex;
      justify-content: center;
      height: 66px;
      border-radius: 10px;
      padding: 14px 20px 0;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-bottom: -12px;
      // margin-right: 30px;
    }
    .main-tabs-item-active {
      color: #e9f0f1;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(1.5px);
    }
    .main-tabs-item-text {
      display: flex;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 16px;
      color: #ffffff;
      line-height: 22px;
      text-align: left;
      font-style: normal;
    }
    .gradient-border {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none; /* Ensure the SVG doesn't block clicks */
    }
  }
  .main {
    display: flex;
    flex: 1;
    justify-content: center;
    padding: 0 14px;
    // flex-direction: row-reverse;
    // width: 98.4%;
    width: 100%;
    &.civilMain {
      ::v-deep.hot-list {
        max-height: calc(100vh - 490px);
        overflow-y: auto;
        &::-webkit-scrollbar-track-piece {
          display: none;
        }

        &::-webkit-scrollbar {
          display: none;
        }

        &::-webkit-scrollbar-thumb {
          display: none;
        }
      }
      // .jobSearchSideContainer {
      //   max-height: calc(100vh - 205px);
      // }
    }
    .left {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
  }
}

.question {
  z-index: 999;
  position: fixed;
  right: 0;
  top: 85%;
  transform: translateY(-50%);
  height: 110px;
  width: 42px;
  background: #fff;
  box-shadow: -7px 2px 15px 0px rgba(0, 0, 0, 0.08);
  border-radius: 12px 0px 0px 12px;
  display: flex;
  flex-direction: column;
  color: #555555;
  font-size: 9px;
  transition: 0.5s all;
  cursor: pointer;
  .part {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: auto;
    justify-content: center;
    align-items: center;
    & ~ .part {
      border-top: 1px solid #e8e8e9;
    }
  }
  span {
    transition: 0.5s all;
    height: 8px;
    white-space: nowrap;
    transform: scale(0.8);
  }
  img {
    transition: 0.5s all;
    margin: 6px;
    width: 22px;
    height: 22px;
  }
}
.question:hover {
  width: 67px;
  height: 150px;
  span {
    height: 15px;
    transform: scale(1);
  }
  img {
    margin: 8px;
    width: 30px;
    height: 30px;
  }
}
.updateMessage {
  white-space: pre-line;
  line-height: 24px;
}
::v-deep .el-menu {
  input {
    border-radius: 18px;
  }
}
::v-deep .questionDialog.el-dialog {
  height: 323px;
  border-radius: 12px;
  background-image: url("../../assets/home/questionBack.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  .el-dialog__header {
    padding: 32px 36px 0 36px;
    .el-dialog__title {
      font-size: 20px;
      font-family: PingFang-SC-Bold, PingFang-SC;
      font-weight: bold;
      color: #222222;
      line-height: 28px;
    }
  }
  .el-dialog__body {
    padding: 13px 36px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    .erweimaBox {
      width: 100%;
      padding: 26px 0 18px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 133px;
        height: 133px;
        margin: 0 44px;
      }
    }
    .erweimaName {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      div {
        margin: 0 90px;
        font-size: 14px;
        font-family: PingFang-SC-Bold, PingFang-SC;
        font-weight: bold;
        color: #080808;
      }
    }
  }
}
.collectDialog {
  ::v-deep .el-dialog {
    height: 500px;
    background-image: linear-gradient(
      180deg,
      #d0e3ff 0%,
      #f1f4f9 10%,
      #f1f4f9 100%
    );
  }
}
.edit {
  color: #f45050;
  font-size: 15px;
  position: relative;
  width: 100%;
  height: 1;
  p {
    cursor: pointer;
    border-radius: 10px;
    background: rgba(244, 80, 80, 0.1);
    padding: 5px 10px;
    position: absolute;
    right: 50px;
    bottom: 5px;
    font-weight: 600;
  }
}
.collectList {
  width: 100%;
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
}
::-webkit-scrollbar {
  width: 4px;
  background-color: #f1f4f9;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(207, 216, 230, 1);
  border-radius: 2px;
}

.careerItem {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  height: 108px;
  width: 31.3%;
  margin: 1%;
  background: #fff;
  border-radius: 9px;
  transition: 0.2s ease-out;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.2s;
  &:hover {
    border-color: #0b6eff;
    transform: translateY(-10%);
    .careerName {
      color: #0b6eff;
    }
    .careerCategory {
      background: #0b6eff;
      color: #fff;
    }
  }
  .careerName {
    height: 52px;
    font-size: 16px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #222222;
    display: flex;
    align-items: center;
    line-height: 22px;
    padding-left: 15px;
    padding-right: 40px;
    position: relative;
    transition: all 0.5s;
    .collect {
      position: absolute;
      width: 18px;
      height: 18px;
      right: 12px;
    }
  }
  .careerCate {
    padding-left: 15px;
    padding-bottom: 5px;
  }
  .careerCategory {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 15px;
    width: 100%;
    height: 36px;
    background: linear-gradient(
      276deg,
      rgba(218, 240, 247, 0.1) 0%,
      rgba(230, 240, 255, 0.3) 100%
    );
    border-radius: 0px 0px 6px 6px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #9cabb7;
    line-height: 20px;
    // transition: all 0.5s;
    div {
      width: 90%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
.careerItemRed {
  .careerName {
    position: relative;
  }
  .del {
    position: absolute;
    right: 20px;
    font-size: 22px;
    margin-bottom: 10px;
  }
  &:hover {
    border-color: #f45050;
    transform: translateY(-10%);
    .careerName {
      color: #f45050;
    }
    .careerCategory {
      background: #f45050;
      color: #fff;
    }
  }
}
</style>
